import React, { useState } from "react";
import { Button, Breadcrumb, Space, Input } from '@arco-design/web-react';
import { IconCheck, IconClose, IconEdit, IconLeft, IconUp } from '@arco-design/web-react/icon';

interface PathNavigationProps {
  currentPath: string;
  drives: string[];
  onPathChange: (path: string) => void;
  onGoUp: () => void;
  getDirectoryContents: (params: { path: string }) => Promise<any>;
  setError: (error: string | null) => void;
}

const PathNavigation: React.FC<PathNavigationProps> = ({
  currentPath,
  drives,
  onPathChange,
  onGoUp,
  getDirectoryContents,
  setError
}) => {
  const [editingPath, setEditingPath] = useState<string>("");
  const [isEditingPath, setIsEditingPath] = useState<boolean>(false);

  // 处理路径跳转
  const handlePathSubmit = () => {
    if (editingPath) {
      // 验证路径是否存在
      getDirectoryContents({ path: editingPath })
        .then(() => {
          onPathChange(editingPath);
          setIsEditingPath(false);
        })
        .catch(() => {
          setError("路径不存在或无法访问");
        });
    }
  };

  if (currentPath === "") {
    return null;
  }

  // 分割路径
  const pathParts = currentPath.split("\\").filter(part => part !== "");
  
  // 构建面包屑数据
  const breadcrumbItems = pathParts.map((part, index) => ({
    name: part,
    path: pathParts.slice(0, index + 1).join("\\") + "\\"
  })).map(item => ({
    ...item,
    path: item.path.replace(/\\\\+/g, "\\")
  }));
  
  return (
    <div className="mb-4">
      <Space size="medium">
        <Button
          onClick={onGoUp}
          icon={<IconLeft />}
          shape="round"
        >
          
        </Button>
        {isEditingPath ? (
          <Space>
            <Input
              value={editingPath}
              onChange={setEditingPath}
              onPressEnter={handlePathSubmit}
              style={{ width: 300 }}
            />
            <Button size="small" shape="round" icon={<IconCheck />} onClick={handlePathSubmit} type="primary">
          
            </Button>
            <Button size="small" shape="round" icon={<IconClose />} onClick={() => setIsEditingPath(false)}>
          
            </Button>
          </Space>
        ) : (
          <Space>
            <Breadcrumb>
              <Breadcrumb.Item>当前位置:</Breadcrumb.Item>
              {breadcrumbItems.map((item, index) => (
                <Breadcrumb.Item
                  key={index}
                  onClick={() => {
                    if (index < breadcrumbItems.length - 1) {
                      onPathChange(item.path);
                    }
                  }}
                  style={{ cursor: index < breadcrumbItems.length - 1 ? 'pointer' : 'default' }}
                >
                  {item.name}
                </Breadcrumb.Item>
              ))}
            </Breadcrumb>
            <Button size="small" shape="round" icon={<IconEdit />} onClick={() => {
              setEditingPath(currentPath);
              setIsEditingPath(true);
            }}>
         
            </Button>
          </Space>
        )}
      </Space>
    </div>
  );
};

export default PathNavigation;